@model LndServicesViewModel
@{
    ViewData.SetLayoutModel(new LayoutModel(nameof(ServerNavPages.Services), StringLocalizer["LND {0}", Model.ConnectionType])
        .SetCategory(WellKnownCategories.Server));
}

<div class="sticky-header">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a asp-action="Services" text-translate="true">Services</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">@ViewData["Title"]</li>
        </ol>
        <h2>@ViewData["Title"]</h2>
    </nav>
</div>
<partial name="_StatusMessage" />
<p>
    BTCPay exposes LND's @Model.ConnectionType service for outside consumption, you will find connection information here.
</p>

<h4 class="mb-3">Compatible wallets</h4>
<div class="services-list">
    @if (Model.Uri != null)
    {
        <a href="https://getalby.com/" target="_blank" class="service" rel="noreferrer noopener">
            <img src="~/img/alby.png" asp-append-version="true" alt="Alby" />
            <h6>Alby</h6>
        </a>
        <a href="https://github.com/ZeusLN/zeus" target="_blank" class="service" rel="noreferrer noopener">
            <img src="~/img/zeus.jpg" asp-append-version="true" alt="Zeus" />
            <h6>Zeus</h6>
        </a>
    }
</div>

<h4 class="mt-4 mb-3" text-translate="true">QR Code connection</h4>
<p text-translate="true">You can use this QR Code to connect external software to your LND instance. This QR Code is only valid for 10 minutes.</p>

@if (Model.QRCode == null)
{
    <div class="form-group">
        <form method="post">
            <button type="submit" class="btn btn-primary" text-translate="true">Show QR Code</button>
        </form>
    </div>
}
else
{
    <div class="form-group">
        <div id="qrCode"></div>
        <div id="qrCodeData" data-url="@Model.QRCode"></div>
    </div>
    <p>See QR Code information by clicking <a href="#detailsQR" data-bs-toggle="collapse">here</a>.</p>
    <div id="detailsQR" class="collapse">
        <div class="form-group">
            <label asp-for="QRCode" class="form-label" text-translate="true">QR Code data</label>
            <input asp-for="QRCode" class="form-control" readonly />
        </div>
        <p>
            Click <a href="@Model.QRCodeLink" target="_blank" rel="noreferrer noopener">here</a> to open the configuration file.
        </p>
    </div>
}

<h4 class="mt-5 mb-3" text-translate="true">More details</h4>
<p>Alternatively, you can see the settings by clicking <a href="#details" data-bs-toggle="collapse">here</a>.</p>

<div id="details" class="collapse">
    @if (Model.Uri == null)
    {
        <div class="form-group">
            <label asp-for="Host" class="form-label"></label>
            <input asp-for="Host" readonly class="form-control" />
        </div>
        <div class="form-group">
            <label asp-for="SSL" class="form-label"></label>
            <input asp-for="SSL" disabled type="checkbox" class="btcpay-toggle ms-2" />
        </div>
    }
    else
    {
        <div class="form-group">
            <label asp-for="Uri" class="form-label"></label>
            <input asp-for="Uri" readonly class="form-control" />
        </div>
    }
    @if (Model.Macaroon != null)
    {
        <div class="form-group">
            <label asp-for="Macaroon" class="form-label"></label>
            <input asp-for="Macaroon" readonly class="form-control" />
        </div>
    }
    @if (Model.AdminMacaroon != null)
    {
        <div class="form-group">
            <label asp-for="AdminMacaroon" class="form-label"></label>
            <input asp-for="AdminMacaroon" readonly class="form-control" />
        </div>
    }
    @if (Model.InvoiceMacaroon != null)
    {
        <div class="form-group">
            <label asp-for="InvoiceMacaroon" class="form-label"></label>
            <input asp-for="InvoiceMacaroon" readonly class="form-control" />
        </div>
    }
    @if (Model.ReadonlyMacaroon != null)
    {
        <div class="form-group">
            <label asp-for="ReadonlyMacaroon" class="form-label"></label>
            <input asp-for="ReadonlyMacaroon" readonly class="form-control" />
        </div>
    }
    @if (Model.GRPCSSLCipherSuites != null)
    {
        <div class="form-group">
            <label asp-for="GRPCSSLCipherSuites" class="form-label"></label>
            <input asp-for="GRPCSSLCipherSuites" readonly class="form-control" />
        </div>
    }
    @if (Model.CertificateThumbprint != null)
    {
        <div class="form-group">
            <label asp-for="CertificateThumbprint" class="form-label"></label>
            <input asp-for="CertificateThumbprint" readonly class="form-control" />
        </div>
    }
</div>

@section PageFootContent {
    <partial name="_ValidationScriptsPartial" />

    @if (Model.QRCode != null)
    {
        <script src="~/js/qrcode.js" asp-append-version="true"></script>
        <script>
            new QRCode(document.getElementById("qrCode"), {
                text: @Safe.Json(Model.QRCode),
                width: 200,
                height: 200,
                useSVG: true,
                correctLevel : QRCode.CorrectLevel.M
            });
        </script>
    }
}
